<!-- 商家销量趋势图(折线图) -->
<template>
	<div id="com-container">
		<div id="title" :style="comStyle">
			<span>▎{{showTitle}}</span>
			<span class="iconfont title-icon" @click="showChoice=!showChoice" :style="comStyle">&#xe6eb;</span>
			<div id="select-con" v-show="showChoice" marginStyle>
				<div class="select-item" v-for="item in selectTypes" :key="item.key" @click="handkeSelect(item.key)">
					{{item.text}}
				</div>
			</div>
		</div>
		<div class="com-chart" ref="trend_ref">

		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				chartInstance: null,
				allData: null, //服务器返回的数据
				showChoice: false, //是否显示可选
				choiceType: 'map', //显示的数据类型
				titleFontSize:0//标题的大小

			}

		},
		mounted() {
			this.initChart()
			this.getData()
			//屏幕监听事件
			window.addEventListener('resize', this.screenAdapter)
			//在页面加载完成的时候 主动进行屏幕的适配
			this.screenAdapter()

		},
		destroyed() {
			window.removeEventListener('resize', this.screenAdapter)
		},
		computed: { //计算属性
			selectTypes() { //下拉菜单的选择
				if (!this.allData) {
					return []
				} else {
					return this.allData.type.filter(item =>{
						return item.key !== this.choiceType
					})
				}
			},
			showTitle() {
				if (!this.allData) {
					return []
				} else {
					return this.allData[this.choiceType].title
				}
			},
			comStyle(){
				return{
					fontSize:this.titleFontSize+'px'
				}
			},
			marginStyle(){
				return{
					marginLeft:this.titleFontSize+'px'
				}
			}
		},
		methods: {
			//初始化echarInstance对象
			initChart() {
				this.chartInstance = this.$echarts.init(this.$refs.trend_ref, 'chalk') //第二个参数主题的使用
				//对图表初始化配置的控制
				const initOption = {
					xAxis: {
						type: 'category',
						boundaryGap: false //紧挨边缘  就是不需要有间隙
					},
					yAxis: {
						type: 'value'
					},
					trid: { //坐标轴的设置
						left: '10%',
						top: '35%',
						right: '4%',
						bottom: '1%',
						containLabel: true
					},
					tooltip: { //工具配置
						trigger: 'axis' //鼠标放上去就有文字提示
					},
					legend: { //设置图标和字所在的位置
						icon: 'circle' //设置图标类型为圆
					}
				}
				//可以多次设置setOption  它是相互整合的过程  不会覆盖之前的设置
				this.chartInstance.setOption(initOption)


			},
			// 获取服务器的数据
			async getData() {
				// http://127.0.0.1:8000/api/seller
				const {
					data: ret
				} = await this.$http.get('trend')

				this.allData = ret
				this.updateChart()
			},
			//更新图表
			updateChart() {
				//区域面积渐变的值
				//半透明的颜色值
				const colorArr1 = [
					'rgba(11,168,44,0.5)',
					'rgba(44,110,255,0.5)',
					'rgba(22,242,217,0.5)',
					'rgba(254,33,30,0.5)',
					'rgba(250,105,0,0)'
				]
				//全透明
				const colorArr2 = [
					'rgba(11,168,44,0)',
					'rgba(44,110,255,0)',
					'rgba(22,242,217,0)',
					'rgba(254,33,30,0)',
					'rgba(250,105,0,0)'
				]
				//类目轴的数据
				const timeArr = this.allData.common.month
				//y轴的数据 series下的数据
				const valueArr = this.allData[this.choiceType].data

				const seriesArr = valueArr.map((item, index) => {
					return {
						name: item.name,
						type: 'line',
						data: item.data,
						stack: 'this.choiceType', //堆叠图效果  stack属性的值要相同
						areaStyle: { //区域面积
							color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{ //0%的颜色值
									offset: 0,
									color: colorArr1[index]
								},
								{ //100%的颜色值
									offset: 1,
									color: colorArr2[index]
								}

							]) //前面四个点是从上往下方向

						}
					}
				})
				//图例数据
				const legendArr = valueArr.map(item => {
					return item.name
				})
				const dataOption = { //因为前面都配置过 这里只对数据行配置 
					xAxis: {
						data: timeArr
					},
					legend: {
						data: legendArr
					},
					series: seriesArr

				}
				this.chartInstance.setOption(dataOption)

			},
			screenAdapter() { //屏幕适配  当浏览器发生变化时 图表也随之改变
				this.titleFontSize = this.$refs.trend_ref.offsetWidth /100*2.3
				
				const adapterOption = { //屏幕适配相关的一些配置
					legend:{//图例的自适应大小
						itemWidth:this.titleFontSize,
						itemHeight:this.titleFontSize,
						itemGap:this.titleFontSize,
						textStyle:{
							fontSize:this.titleFontSize
						}
					}
				}
				this.chartInstance.setOption(adapterOption)

				//手动调用图表对象的resize  才能产生效果
				this.chartInstance.resize()
			},
			handkeSelect(index) {
				this.choiceType = index
				this.updateChart()
				this.showChoice = false
			}

		}
	}
</script>

<style scoped="scoped">
	#title {
		position: absolute;
		left: 10px;
		z-index: 10;
		color: white;
	}

	.title-icon {
		margin-left: 10px;
		cursor: pointer;
	}
	#select-con{
		background-color: #227333;
	}
</style>
